html * {
        margin: 0;
        /*padding: 0; SELECT NOT DISPLAYED CORRECTLY IN FIREFOX */
}

/* GENERAL */
.spinner {
        padding: 5px;
        position: absolute;
        right: 0;
}

.h3create {
        padding-top: 10px;
        padding-bottom: 10px;
}

body {
        background: #fff;
        color: #333;
        font: 11px verdana, arial, helvetica, sans-serif;
        text-align: center;
        margin-bottom: 15px;
}

#grailsLogo {
        padding: 20px;
}

a:link,a:visited,a:hover {
        color: #666;
        font-weight: bold;
        text-decoration: none;
}

h1 {
        color: #48802c;
        font-weight: normal;
        font-size: 16px;
        margin: .8em 0 .3em 0;
}

ul {
        padding-left: 15px;
}

input,select,textarea {
        background-color: #fcfcfc;
        border: 1px solid #ccc;
        font: 11px verdana, arial, helvetica, sans-serif;
        margin: 2px 0;
        padding: 2px 4px;
}

select {
        padding: 2px 2px 2px 0;
}

textarea {
        width: 250px;
        height: 150px;
        vertical-align: top;
}

input:focus,select:focus,textarea:focus {
        border: 1px solid #b2d1ff;
}

.body {
        float: left;
        padding: 20px;
        text-align: center;
}

.bodyshow {
        float: left;
        margin-left: 15%;
        text-align: center;
        margin-top: 20px;
}

.bodyshowpl {
        float: left;
        margin-left: 16%;
        text-align: center;
        margin-top: 20px;
}

.bodyhorario {
        float: left;
        margin-left: 10%;
        text-align: center;
        margin-top: 10px;
}

/* NAVIGATION MENU */
.nav {
        border: 1px solid #ccc;
        border-style: solid none solid none;
        margin-top: 5px;
        padding: 7px 12px;
        margin-left: 20%;
        width: 775px;
        text-align: center;
}

.menuButton {
        font-size: 10px;
        padding: 0 5px;
}

.menuButton a {
        color: #333;
        padding: 4px 6px;
}

.menuButton a.home {
        background: url(../images/skin/house.png) center left no-repeat;
        color: #333;
        padding-left: 25px;
}

.menuButton a.list {
        background: url(../images/skin/database_table.png) center left no-repeat;
        color: #333;
        padding-left: 25px;
}

.menuButton a.create {
        background: url(../images/skin/database_add.png) center left no-repeat;
        color: #333;
        padding-left: 25px;
}

/* MESSAGES AND ERRORS */
.message {
        background: #f3f8fc url(../images/skin/information.png) 8px 50%
                no-repeat;
        border: 1px solid #b2d1ff;
        color: #006dba;
        margin: 10px 0 5px 0;
        padding: 5px 5px 5px 30px;
        width: 865px;
}

.messagepl {
        background: #f3f8fc url(../images/skin/information.png) 8px 50%
                no-repeat;
        border: 1px solid #b2d1ff;
        color: #006dba;
        margin: 10px 0 5px 0;
        padding: 5px 5px 5px 30px;
        width: 765px;
        margin-left:50px;
}

div.errors {
        background: #fff3f3;
        border: 1px solid red;
        color: #cc0000;
        margin: 10px 0 5px 0;
        padding: 5px 0 5px 0;
}

div.errors ul {
        list-style: none;
        padding: 0;
}

div.errors li {
        background: url(../images/skin/exclamation.png) 8px 0% no-repeat;
        line-height: 16px;
        padding-left: 30px;
}

td.errors select {
        border: 1px solid red;
}

td.errors input {
        border: 1px solid red;
}

/* TABLES */
table {
        border: 1px solid #ccc;
        width: 100%;
}

.tableshow {
        border: 0px solid #ccc;
        width: 600;
        text-align: center;
}

.interna {
        border: 0px solid #ccc;
        width: 620;
        text-align: center;
        padding-left: 10px;
}

.tableshowexterna {
        border: 0px solid #ccc;
        width: 150%;
        text-align: center;
        padding-left: 10px;
}

.tableexterna {
        margin-left: 0%;
        border: 0;
        background-color:#F5F5F5;
        
}

.tablehorario {
        border: 0;
        width: 1050;
}

tr {
        border: 1;
}

td,th {
        font: 13px verdana, arial, helvetica, sans-serif;
        line-height: 12px;
        padding: 5px 6px;
        text-align: left;
        vertical-align: top;
        color: blue;
        border: 1;
}

.tdhorario {
        font: 13px verdana, arial, helvetica, sans-serif;
        line-height: 12px;
        padding: 5px 5px 5px 5px;
        text-align: center;
        vertical-align: center;
        color: blue;
        border: 1;
        align:center;
        font-weight: bold;
}

.inicio {
        font: 12px verdana, arial, helvetica, sans-serif;
        line-height: 12px;
        padding: 0px 0px;
        margin-top:50px;
        margin-bottom:30px;
        text-align: center;
        vertical-align: top;
        border: 1;
        align:center;
        width:500px;
}

.texto{
		font: 12px verdana, arial, helvetica, sans-serif;
}
.escuro {
        background-color: #E3E4FA;
}

th {
        background: #fff url(../images/skin/shadow.jpg);
        color: #666;
        font-size: 11px;
        font-weight: bold;
        line-height: 17px;
        padding: 2px 6px;
}

th a:link,th a:visited,th a:hover {
        color: #333;
        display: block;
        font-size: 10px;
        text-decoration: none;
        width: 100%;
}

th.asc a,th.desc a {
        background-position: right;
        background-repeat: no-repeat;
}

th.asc a {
        background-image: url(../images/skin/sorted_asc.gif);
}

th.desc a {
        background-image: url(../images/skin/sorted_desc.gif);
}

.odd {
        background: #f7f7f7;
}

.even {
        background: #fff;
}

/* LIST */
.list table {
        border-collapse: collapse;
}

.list th,.list td {
        border-left: 1px solid #ddd;
}

.list th:hover,.list tr:hover {
        background: #b2d1ff;
}

/* PAGINATION */
.paginateButtons {
        background: #fff url(../images/skin/shadow.jpg) bottom repeat-x;
        border: 1px solid #ccc;
        border-top: 0;
        color: #666;
        font-size: 10px;
        overflow: hidden;
        padding: 10px 3px;
}

.paginateButtons a {
        background: #fff;
        border: 1px solid #ccc;
        border-color: #ccc #aaa #aaa #ccc;
        color: #666;
        margin: 0 3px;
        padding: 2px 6px;
}

.paginateButtons span {
        padding: 2px 3px;
}

/* DIALOG */
.dialog table {
        padding: 5px 0;
}

.prop .escuro {
        padding: 5px;
}

.prop .name {
        text-align: left;
        width: 20%;
        white-space: nowrap;
}

.prop .value {
        text-align: left;
        width: 80%;
}

.value {
        font-weight: bold;
}

/* ACTION BUTTONS */
.buttons { /*border: 1px solid #ccc;*/
        /*color: #666;*/
        font-size: 10px;
        margin-top: 5px;
        margin-bottom: 15px;
        overflow: hidden;
        padding: 0;
        font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

.buttons input {
        font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
        border: 1px solid #C0C0C0;
        color: #333;
        text-align: center;
        cursor: pointer;
        font-size: 12px;
        font-weight: bold;
        overflow: visible;
        padding: 5px;
        width: 150px;
        background: #fff url(../images/skin/shadow.jpg) bottom repeat-x;
}

.buttons2 input {
        font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
        border: 1px solid #C0C0C0;
        color: #333;
        text-align: center;
        cursor: pointer;
        font-size: 12px;
        font-weight: bold;
        overflow: visible;
        padding: 0px;
        width: 50px;
        height: 15px;
        background: #fff url(../images/skin/shadow.jpg) bottom repeat-x;
}

.buttons input:hover {
        border: 1px solid #000;
}

.buttons input.delete {
        /*background: transparent url(../images/skin/database_delete.png) 5px 50% no-repeat;
    padding-left: 28px;*/
        
}

.buttons input.edit {
        /*background: transparent url(../images/skin/database_edit.png) 5px 50% no-repeat;
    padding-left: 28px;*/
    height:20px;
        
}

.buttons input.save {
        padding-left: 0px;
}


.button_login { /*border: 1px solid #ccc;*/
        /*color: #666;*/
        font-size: 10px;
        overflow: hidden;
        font-align:center;
        font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

.button_login input {
        font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
        border: 1px solid #C0C0C0;
        color: #333;
        text-align: center;
        cursor: pointer;
        font-size: 12px;
        font-weight: old;
        overflow: visible;
        width: 70px;
        background: #fff url(../images/skin/shadow.jpg) bottom repeat-x;
}

.button_login input:hover {
        border: 1px solid #000;
}



<!--
-->
img.avatar {
        width: 6.0em;
        height: 7.5em;
}

img.avatar_small {
        width: 4em;
        height: 5em;
}

img.avatar_tiny {
        width: 2em;
        height: 2.5em;
}

.foto {
        display: block;
        margin-left: 50px;
        margin-bottom: 10px;
        /* This adds the border */
        padding: 5px;
        border: solid;
        border-color: #dddddd #aaaaaa #aaaaaa #dddddd;
        border-width: 1px 2px 2px 1px;
        background-color: white;
        height: 100px;
        width: 80px;
        align:center;
}

.fotoperfil {
        margin-top: 0px;
        height: 130px;
        width: 110px;
}

.divcreate {
        border-bottom-width: 2px;
        border-bottom-color: 333;
        color: blue;
}

hr {
        border-width: 0 0 1px 0;
        border-color: black;
}

.tablecreate {
        border: 0;
        padding-left: 20%;
        padding-right: 10%;
        padding-top: 10px;
}

.corpodados {
        background-color: #CBD4DF;
        width: 900px;
        height: 600px;
        align: center;
        border:1px;
        border-style: outset;
        border-color:blue;
        padding-bottom:10px;
}

.historias {
        background-color: #F5F5F5;
        width: 885px;
        align: center;
        border:1px;
        border-style: outset;
        border-color:blue;
        padding-bottom:10px;
}

.historia {
	width: 800px;
    text-align: center;
    border:2px;
    border-style: outset;
    border-color:blue;
    padding-top:5px;
    padding-bottom:5px;
    margin-top:5px;
    margin-bottom:5px;
    margin-left:40px;
    background-color: #CBD4DF;
}

.dados{
    width: 200px;
	align: center;
    border:1px;
    border-style: outset;
    border-color:white;
}

.galeria{
    width: 700px;
    height: 250px;
	align: center;
    border:1px;
    border-style: outset;
    border-color:white;
    margin-left:100px;
    background-color: #F5F5F5;
    margin-bottom:15px;
    margin-top:15px;
}

.galeriaAmigos{
	padding-top:50px;
    width: 610px;
    height: 250px;
	align: center;
    border:1px;
    border-style: outset;
    border-color:white;
    margin-left:130px;
    background-color: #FFF;
    margin-bottom:15px;
    margin-top:15px;
}

.h3galeria{
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
        font-size: 18px;
        color: navy;
        padding: 4px;
        text-align:center;	
}

.corpodadospl {
        background-color: #F5F5F5;
        width: 900;
        align: center;
}

.corpohorario {
        background-color: #F5F5F5;
        width: 1050;
        align: center;
}

.corpodadoslist {
        background-color: #FFF;
        width: 800px;
        align: center;
        margin: 50px 0px 20px 120px;
}

.fontshow {
        color: blue;
}

.menuButton a.menu {
        background: url(../images/skin/menu.png) center left no-repeat;
        color: #333;
        padding-left: 25px;
}

.menulayout {
        font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
        border: 1px;
        margin-left: 20%;
        padding: 0px;
        font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans",
                "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica,
                sans-serif;
        font-size: 12px;
        font-weight: bold;
        width: 800px;
        text-align: center;
        margin-top: 10px;
}

.menulayout ul {
        background: #E8E8E8;
        height: 25px;
        list-style: none;
        margin: 0;
        padding: 0;
        border: 1px;
}

.menulayout li {
        float: left;
        padding: 0px;
        border: 1px;
}

.menulayout li a {
        color: #000;
        display: block;
        font-weight: bold;
        line-height: 25px;
        margin: 0px;
        padding: 0px 25px;
        text-align: center;
        text-decoration: none;
        font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
        font-size: 12px;
}

.menulayout li a:hover,.menulayout ul li:hover a {
        background: #2B60DE url("../images/hover.gif") bottom center no-repeat;
        color: #000;
        text-decoration: none;
}

.menulayout ul :hover a {
        background: #2B60DE url("../images/hover.gif") bottom center no-repeat;
        color: #fff;
        text-decoration: none;
}

.menulayout li ul {
        font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
        background: #E8E8E8;
        display: none;
        height: auto;
        padding: 0px;
        margin: 0px;
        border: 1px;
        position: absolute;
        width: 150px;
        z-index: 200;
        /*top:1em;
/*left:0;*/
}

.menulayout li:hover ul {
        display: block;
}

.menulayout li li {
        display: block;
        float: none;
        margin: 0px;
        padding: 0px;
        width: 150px;
}

.menulayout li:hover li a {
        background: none;
}

.menulayout li ul a {
        display: block;
        height: 25px;
        font-size: 12px;
        font-style: normal;
        margin: 0px;
        padding: 0px 10px 0px 15px;
        text-align: left;
}

.menulayout  li ul a:hover,.menulayout li ul li:hover a {
        background: #2B60DE url('../images/hover_sub.gif') center left no-repeat;
        border: 0px;
        color: #ffffff;
        text-decoration: none;
}

.menulayout ul li a:hover {
        background: #2B60DE url('../images/hover_sub.gif') center left no-repeat;
        border: 0px;
        color: #FFF;
        text-decoration: none;
}

.menulayout p {
        clear: left;
}

.h3titulo{
        font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
        font-size: 13px;
        color: navy;
        padding-top: 4px;
        padding-bottom: 4px;
        margin-top: 1px;
        margin-bottom: 10px;
        background-color: #F5F5F5;
        width: 200px;
        text-align:center;
}

.h3historia{
        font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
        font-size: 13px;
        color: navy;
        padding-top: 4px;
        padding-bottom: 4px;
        margin-top: 1px;
        margin-bottom: 10px;
        background-color: #F5F5F5;
        width: 800px;
        text-align:center;
}

.h3SerAmigo{
		font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
        font-size: 13px;
        color: navy;
        padding-top: 4px;
        padding-bottom: 4px;
        margin-top: 1px;
        margin-bottom: 10px;
        background-color: #F5F5F5;
        width: 500px;
        text-align:center;
}

.imgFoto{
	width: 120px;
	height: 140px;	
}

.textArea{
		 width: 400px;
		 height: 300px;	
}

.h3pl{
        font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
        font-size: 13px;
        color: navy;
        padding-top: 4px;
        padding-bottom: 4px;
        margin-top: 1px;
        margin-bottom: 10px;
        background-color: #CBD4DF;
        width: 800px;
}
.h3galeria{
       font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
        font-size: 15px;
        color: navy;
        background-color: #F5F5F5;
        width: 900px;
        text-align:center;
}

.h3horario {
        font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
        font-size: 13px;
        color: navy;
        padding-top: 4px;
        padding-bottom: 4px;
        margin-top: 1px;
        margin-bottom: 10px;
        background-color: #CBD4DF;
        width: 1050px;
}

.login {
        font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
        font-size: 11px;
        padding-top: 4px;
        padding-bottom: 4px;
        margin-top: 1px;
        margin-bottom: 10px;
        background-color: #F5F5F5;
        width: 600px;
        height: 500px;
        align: center;
        margin-left: 25%;
        border:1px;
        border-style: solid;
        border-color:blue;
}

.logoutout {
        font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
        font-size: 11px;
        padding-top: 4px;     
        margin-top: 1px;
        margin-bottom: 10px;
        background-color: #F5F5F5;
        width: 900px;
        height: 20px;
        align: center;
        border:1px;
        border-color:blue;
}

a.logout:link,a.logout:visited,a.logout:active {
        text-decoration: none;
        margin-left: 10px;      
}

a.logout:hover { 
        text-decoration: underline; 
        color: #FFF; 
        background: #4169E1;
}

.divplanejamento{
        margin:10px;    
}

.entrar{
	margin-top:50px;
}

a.planejamento:link,a.planejamento:visited,a.planejamento:active {
        text-decoration: none;
        font: 40px verdana, arial, helvetica, sans-serif;
        align:center;
        color: #6699FF;
}

a.planejamento:hover { 
        text-decoration: none; 
        color: green;
        font: 35px;
}

a.pin:link,a.pin:visited,a.pin:active {
        text-decoration: none;
        font: 20px verdana, arial, helvetica, sans-serif;
        align:center;
        color: #FF6347;
}

a.pin:hover { 
        text-decoration: none; 
        color:#FFD700;
        font: 35px;
}